<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>省广文章页1</title>
  <link rel="stylesheet" href="./css/reset.css">
  <!-- <link rel="stylesheet" href="./css/common.css"> -->
  <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> -->
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <link rel="stylesheet" href="./css/article1.css">
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="logo-box">
      <img src="./assets/images/logo.png" alt="logo">
    </div>
    <div class="search-box">
      <a href="./article2.html">
        <img src="./assets/images/search-logo.png" alt="search">
      </a>
    </div>
  </header>
  <!-- 主要内容 -->
  <section class="content">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="banner">
            <img src="./assets/images/article-pic1.png" alt="article-pic1.">
            <div class="mask-layer">
              <div class="title">
                <p>[专业IMC平台]</p>
                <p>太子金涂鸦大赛网络整合营销传播</p>
              </div>
              <div class="mask-text">
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="banner">
              <img src="./assets/images/article-pic1.png" alt="article-pic1.">
              <div class="mask-layer">
                <div class="title">
                  <p>[专业IMC平台]</p>
                  <p>太子金涂鸦大赛网络整合营销传播</p>
                </div>
                <div class="mask-text">
                  <div class="circle">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="banner">
              <img src="./assets/images/article-pic1.png" alt="article-pic1.">
              <div class="mask-layer">
                <div class="title">
                  <p>[专业IMC平台]</p>
                  <p>太子金涂鸦大赛网络整合营销传播</p>
                </div>
                <div class="mask-text">
                  <div class="circle">
                    <ul>
                      <li></li>
                      <li></li>
                      <li></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 ：左右箭头-->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
      </div>
      <!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script> -->
      <script src="./js/swiper-bundle.min.js"> </script>
      <script>
        var mySwiper = new Swiper('.swiper-container', {
          // direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
      </script>


      <div class="details">
        <div class="items-big">
          <div class="items">
            <div class="pic">
              <img src="./assets/images/article-pic2.png" alt="article-pic2">
            </div>
            <div class="title">海天“晒“宴，和汪涵一起，
              参观海天酱油......
            </div>
            <div class="icont">
              <div class="left">
                营销
              </div>
              <div class="right">
                <div class="box">
                  <div class="like">
                    <img src="./assets/images/article-greylove.png" alt="article-greylove">
                  </div>
                  120
                </div>
                <div class="box">
                  <div class="eye">
                    <img src="./assets/images/article-greyeye.png" alt="article-greyey">
                  </div>
                  560
                </div>
              </div>
            </div>
            <div class="user">
              <div class="user-pic">
                <img src="./assets/images/article-girl.png" alt="article-girl">
              </div>
              <p>叶巧岚</p>
              <p>2015年1月20日</p>
            </div>
          </div>
          <div class="items">
            <div class="pic">
              <img src="./assets/images/article-pic2.png" alt="article-pic2">
            </div>
            <div class="title">海天“晒“宴，和汪涵一起，
              参观海天酱油......
            </div>
            <div class="icont">
              <div class="left">
                营销
              </div>
              <div class="right">
                <div class="box">
                  <div class="like">
                    <img src="./assets/images/article-greylove.png" alt="article-greylove">
                  </div>
                  120
                </div>
                <div class="box">
                  <div class="eye">
                    <img src="./assets/images/article-greyeye.png" alt="article-greyey">
                  </div>
                  560
                </div>
              </div>
            </div>
            <div class="user">
              <div class="user-pic">
                <img src="./assets/images/article-girl.png" alt="article-girl">
              </div>
              <p>叶巧岚</p>
              <p>2015年1月20日</p>
            </div>
          </div>
        </div>
        <div class="items-big">
          <div class="items">
            <div class="pic">
              <img src="./assets/images/article-pic2.png" alt="article-pic2">
            </div>
            <div class="title">海天“晒“宴，和汪涵一起，
              参观海天酱油......
            </div>
            <div class="icont">
              <div class="left">
                营销
              </div>
              <div class="right">
                <div class="box">
                  <div class="like">
                    <img src="./assets/images/article-greylove.png" alt="article-greylove">
                  </div>
                  120
                </div>
                <div class="box">
                  <div class="eye">
                    <img src="./assets/images/article-greyeye.png" alt="article-greyey">
                  </div>
                  560
                </div>
              </div>
            </div>
            <div class="user">
              <div class="user-pic">
                <img src="./assets/images/article-girl.png" alt="article-girl">
              </div>
              <p>叶巧岚</p>
              <p>2015年1月20日</p>
            </div>
          </div>
          <div class="items">
            <div class="pic">
              <img src="./assets/images/article-pic2.png" alt="article-pic2">
            </div>
            <div class="title">海天“晒“宴，和汪涵一起，
              参观海天酱油......
            </div>
            <div class="icont">
              <div class="left">
                营销
              </div>
              <div class="right">
                <div class="box">
                  <div class="like">
                    <img src="./assets/images/article-greylove.png" alt="article-greylove">
                  </div>
                  120
                </div>
                <div class="box">
                  <div class="eye">
                    <img src="./assets/images/article-greyeye.png" alt="article-greyey">
                  </div>
                  560
                </div>
              </div>
            </div>
            <div class="user">
              <div class="user-pic">
                <img src="./assets/images/article-girl.png" alt="article-girl">
              </div>
              <p>叶巧岚</p>
              <p>2015年1月20日</p>
            </div>
          </div>
        </div>
        <div class="items-big">
          <div class="items">
            <div class="pic">
              <img src="./assets/images/article-pic2.png" alt="article-pic2">
            </div>
            <div class="title">海天“晒“宴，和汪涵一起，
              参观海天酱油......
            </div>
            <div class="icont">
              <div class="left">
                营销
              </div>
              <div class="right">
                <div class="box">
                  <div class="like">
                    <img src="./assets/images/article-greylove.png" alt="article-greylove">
                  </div>
                  120
                </div>
                <div class="box">
                  <div class="eye">
                    <img src="./assets/images/article-greyeye.png" alt="article-greyey">
                  </div>
                  560
                </div>
              </div>
            </div>
            <div class="user">
              <div class="user-pic">
                <img src="./assets/images/article-girl.png" alt="article-girl">
              </div>
              <p>叶巧岚</p>
              <p>2015年1月20日</p>
            </div>
          </div>
          <div class="items">
            <div class="pic">
              <img src="./assets/images/article-pic2.png" alt="article-pic2">
            </div>
            <div class="title">海天“晒“宴，和汪涵一起，
              参观海天酱油......
            </div>
            <div class="icont">
              <div class="left">
                营销
              </div>
              <div class="right">
                <div class="box">
                  <div class="like">
                    <img src="./assets/images/article-greylove.png" alt="article-greylove">
                  </div>
                  120
                </div>
                <div class="box">
                  <div class="eye">
                    <img src="./assets/images/article-greyeye.png" alt="article-greyey">
                  </div>
                  560
                </div>
              </div>
            </div>
            <div class="user">
              <div class="user-pic">
                <img src="./assets/images/article-girl.png" alt="article-girl">
              </div>
              <p>叶巧岚</p>
              <p>2015年1月20日</p>
            </div>
          </div>
        </div>
      </div>
      <div class="more">
        <p>加载更多</p>
      </div>
  </section>
  <!-- 尾部 -->
  <footer>
    <ul>
      <li>
        <a href="./index.html">
          <div class="foot-logo">
            <img src="./assets/images/pic6-1.png" alt="首页">
            <p>首页</p>
          </div>
        </a>
      </li>
      <li>
        <a href="./search.html">
          <div class="foot-logo">
            <img src="./assets/images/pic6-2.png" alt="GIMC">
            <p>GIMC</p>
          </div>
        </a>
      </li>
      <li>
        <a href="./article1.html">
          <div class="foot-logo">
            <img src="./assets/images/pic6-3.png" alt="文章">
            <p>文章</p>
          </div>
        </a>
      </li>
      <li>
        <a href="./resources1.html">
          <div class="foot-logo">
            <img src="./assets/images/pic6-4.png" alt="资源">
            <p>资源</p>
          </div>
        </a>
      </li>
      <li>
        <a href="./class1.html">
          <div class="foot-logo">
            <img src="./assets/images/pic6-5.png" alt="学院">
            <p>学院</p>
          </div>
        </a>
      </li>
    </ul>
  </footer>
</body>

</html>